<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>an-ui</title>
    <style>
        nav {
            display: flex;
            flex-wrap: wrap;
        }

        nav>a {
            padding: 10px 30px;
            border: 1px solid;
            font-weight: 600;
        }

        nav a:not(:hover) {
            text-decoration: none;
            color: inherit;
        }

        nav>a+a {
            margin-left: 20px;
        }
    </style>
</head>

<body>
    <nav>
        <a href="/icons.html">icons</a>
        <a href="/button.html">button</a>
        <a href="/link.html">link</a>
        <a href="/modal.html">modal</a>
    </nav>
    <!-- <style>
        .text {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100px;
            height: 100px;
            background: rgb(255, 55, 55);
            margin-left: 30%;

            & span {
                color: #fff;
                font-size: 24px;
                font-weight: 600;
                font-family: 微软雅黑;
                letter-spacing: 2px;

                text-shadow: 1px 1px 2px rgba(0, 0, 0, .5),
                2px 2px 2px rgba(0, 0, 0, .5),
                4px 4px 2px rgba(0, 0, 0, .5),
                6px 6px 2px rgba(0, 0, 0, .5),
                8px 8px 2px rgba(0, 0, 0, .2),
                10px 10px 2px rgba(0, 0, 0, .1)
                ;
            }
        }
    </style>
    <br>
    <br>
    <div class="text">
        <span>文字</span>
    </div> -->
</body>

</html>